let inp = document.querySelector('input');
let btn = document.querySelector('#send');
let prev = document.querySelector('#prev');
let next = document.querySelector('#next');
let tbody = document.querySelector('tbody');
let audio = document.querySelector('audio');
let index = 0;

btn.addEventListener('click', function () {
    if (inp.value) {
        fn();
    } else {
        alert('请输入歌曲名称');
    }


})
//下一页
next.addEventListener('click', function () {
    ++index
    fn();
});
//上一页
prev.addEventListener('click', function () {
    --index
    if (index < 0) {
        alert('已经是第一页');
    } else {
        fn();
    }
});


let url;
tbody.addEventListener('click', function (e) {
    // console.log(e.target.id);
    url = e.target.id;
    fn1();
})


function fn1() {
    ajax("GET", "https://music.0melon0.cn/song/url", function (res) {
        // console.log(res.result.songs);
        console.log(res.data[0].url);
        audio.src = res.data[0].url;
        // songs.forEach(function (ietm) {

        // });
    }, {
        id: url

    });
}

function fn() {
    ajax("GET", "https://music.0melon0.cn/search", function (res) {
        // console.log(res.result.songs);
        let songs = res.result.songs;
        tbody.innerHTML = '';
        songs.forEach(function (ietm) {
            // console.log(ietm);   
            // 歌名
            // console.log(ietm.name);
            // 歌手
            // console.log(ietm.artists[0].name);
            // 专辑
            // console.log(ietm.album.name);
            // 时长
            // console.log(ietm.duration);
            tbody.innerHTML += `<tr><td id=${ietm.id}>${ietm.name}</td><td>${ietm.artists[0].name}</td><td>${ietm.album.name}</td><td>${moment(ietm.duration).format('MM:SS')}</td></tr>`
        });
        // let song = res.result.songs[0].name;
        // console.log(song);

    }, {
        keywords: inp.value,
        limit: 20,
        offset: index

    });
}









function ajax(_method, _url, _callBack, _data) {
    let xhr = new XMLHttpRequest();
    let result; // 获取异步数据
    // http://127.0.0.1:5500/test.html?name=hy&id=1&
    // 处理get请求, 参数放置请求头
    let str = "?";
    // 如果有传入数据就进行处理
    if (_data) {
        for (let key in _data) {
            str += `${key}=${_data[key]}&`;
        };
    }
    // ?name=hy&id=1

    // 判断是否是get请求
    if (_method.toUpperCase() == "GET") {
        // console.log("这是一个get请求");
        xhr.open(_method, _url + str.slice(0, -1));
        xhr.send();
    } else {
        // post及其他请求
        // console.log("这是一个post请求");
        xhr.open(_method, _url);
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(_data));
    }

    xhr.addEventListener("readystatechange", function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                result = JSON.parse(xhr.responseText);
            } else {
                result = JSON.parse(xhr.responseText);
            }
            // 将结果通过函数的参数返回出去
            _callBack(result);
        }
    });
}